<template>
	<uni-nav-bar title="盘库" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale" style="color:#2C96F9">{{text?text+'前':'请'}}先填写盘库信息 </view>
	<view class="package_sale">
		<view class="space-between" v-if="state==1">
			<view>服务站</view>
			<hpy-form-select :dataList="serviceList" text="name" name="value" @change="consoluService"
				:Text="serviceName" :icon="true" />
		</view>
		<view class="space-between" v-else>
			<view>加注机</view>
			<hpy-form-select :dataList="fillList" :text="fillNames" name="value" @change="consoluFill" :Text="fillName"
				:icon="true" />
		</view>
		<view class="space-between top">
			<view>溶液存量</view>
			<input class="uni-input" placeholder="请填写溶液存量" v-model="amount" type="number" />
		</view>
		<view class="top">
			<view>图片</view>
			<mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" :maxCount="9"
				:sizeType="sizeType" />
		</view>
		<Watermark ref="watermark" @selected="selected"></Watermark>
	</view>
	<view class="add" @click="submit()">确定</view>
</template>

<script setup lang="ts">
	import { navBack, redirectTo } from '@/utils/navigator';
	import Watermark from '@c/watermark.vue';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { errorToast, showLoading, successToast } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import { useUserInformation } from '@/stores/earthPushing/userSale';
	import { getFillList, getServiceAreaList,getFillLists } from '@/gql/earthPushing/user';
	import { getDriverID } from '@/stores/driverID';
	const staff_id = getDriverID();
	const userInfo = useUserInformation();
	const amount = ref()
	const fillList = ref([]); // 加注列表
	const fillName = ref('请选择加注机'); //加注名称
	const fillId = ref();//加注ID

	const serviceList = ref([])//服务站列表
	const serviceName = ref('请选择服务站'); //服务站名称
	const serviceId = ref();//服务站ID
	// 上传图片
	const imgList = ref([])
	const image = ref([])

	const watermark = ref(null)
	const text = ref('')

	const type = ref()
	const state = ref()
	const change = ref()
	const fillNames=ref()
	// const sourceType = ["camera"]
	const sizeType = ['compressed']
	onLoad((pearm) => {
		if (pearm.type) {
			showLoading()
			userInfo.getUserInfo()
			text.value = pearm.type == 1 ? '配送车补液' : pearm.type === 'addRelocation' ? '移库' : pearm.type === 'addOutbound' ? '采购入库': pearm.type === 'addAccount' ? '调整溶液存量': pearm.type === 'addService' ? '服务站调整溶液' : ''
		}
		change.value = pearm.change
		if (pearm.state == 1) {
			service()
		}
		if (pearm.change == 1) {
			fillNames.value='name'
			FillAll()
		} else {
			fillNames.value='fill_name'
			setTimeout(() => {
				fillLists()
			}, 1000)
		}
		state.value = pearm.state
		type.value = pearm.type
	})
	// 上传图片
	function onChoose(e : any) {
		watermark.value.fillTextToImg(e.tempFilePaths[0])
		console.log(e.tempFilePaths[0])
		// selected(e.tempFilePaths[0])
	}
	function selected(e : any) {
		uni.uploadFile({
			url: 'https://admin.anlan.tech/api/common/upload2',
			filePath: e,
			name: 'file',
			formData: {
				'user': 'test'  // 上传附带参数
			},
			success: (uploadFileRes) => {
				// 根据接口具体返回格式   赋值具体对应url
				imgList.value.push(JSON.parse(uploadFileRes.data).data.fullurl)
				image.value.push(JSON.parse(uploadFileRes.data).data.url)
				console.log(imgList.value)
			},
			fail: (err : any) => {
				console.log('err', err)
			}
		});
	}
	// 删除图片
	function onDelete(index : number) {
		imgList.value = imgList.value.filter((item, ind) => ind == index ? item = null : item)
		image.value = image.value.filter((item, ind) => ind == index ? item = null : item)
	}
	// 获取加注机列表
	function fillLists() {
		showLoading()
		const payload = {
			query: getFillList,
			variables: {
				delivery_id: userInfo.delevery_id,
			},
		};
		toPublish('ql/staff/getFillList',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getFillList } = obj.data;
				fillList.value = getFillList
			},
		);
	}
	function FillAll() {
		showLoading('正在加载');
		const payload = {
			query: getFillLists
		};
		toPublish('ql/control/getFillList', payload, (obj : any) => {
			uni.hideLoading();
			const { data } = obj;
			fillList.value = data.getFillList;
		});
	}
	// 获取服务站列表
	function service() {
		showLoading()
		const payload = {
			query: getServiceAreaList
		};
		toPublish('ql/staff/getServiceAreaList',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getServiceAreaList } = obj.data;
				serviceList.value = getServiceAreaList
			},
		);
	}
	//切换加注机列表
	function consoluFill(e : any) {
		if(change.value==1){
			fillName.value = e.data.name;
			fillId.value = e.data.id;
		}else{
			fillName.value = e.data.fill_name;
			fillId.value = e.data.fill_id;
		}
		
	}
	//切换服务站列表
	function consoluService(e : any) {
		serviceName.value = e.data.name;
		serviceId.value = e.data.id;
	}
	//提交
	function submit() {
		if (!fillId.value && state.value != 1) {
			errorToast('请选择加注机');
			return
		}
		if (!serviceId.value && state.value == 1) {
			errorToast('请选择服务站');
			return
		}
		if (!amount.value) {
			errorToast('请填写溶液存量');
			return
		}
		if (image.value.length < 1) {
			errorToast('请上传溶液存量图');
			return
		}
		showLoading('正在提交');
		if (state.value == 1) {
			addSeveice()
		} else {
			addFill()
		}
	}
	function addFill() {
		const payload = {
			staff_id,
			amount: amount.value,
			fill_id: fillId.value,
			image: image.value.join(',')
		};
		toPublish('staff/addAmountPanByFill', payload, (obj : any) => {
			const { code, msg, data } = obj;
			if (code === 1) {
				successToast(msg);
				setTimeout(() => {
					redirectTo('Sale/inventory/inventoryDetail?type=' + type.value + '&id=' + data.id + '&state=' + state.value)
				}, 1000)
			} else {
				errorToast(msg);
			}
		});
	}
	function addSeveice() {
		const payload = {
			staff_id,
			amount: amount.value,
			service_id: serviceId.value,
			image: image.value.join(',')
		};
		toPublish('staff/addAmountPanByService', payload, (obj : any) => {
			const { code, msg, data } = obj;
			if (code === 1) {
				successToast(msg);
				setTimeout(() => {
					redirectTo('Sale/inventory/inventoryDetail?type=' + type.value + '&id=' + data.id + '&state=' + state.value)
				}, 1000)
			} else {
				errorToast(msg);
			}
		});
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 25rpx;
	}

	.add {
		width: 480rpx;
		height: 100rpx;
		background: linear-gradient(-10deg, #2C96F9, #1B91FF);
		border-radius: 5px;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		margin: 60rpx auto 20rpx;
		font-size: 32rpx;
	}

	input {
		text-align: right;
	}
</style>
<style>
	.space-between>>>.select-picker {
		justify-content: flex-end;
	}
</style>